<template>
    <div class="addGoods-container">
        <b-container class="bv-example-row row-box">
            <!-- 步骤条 -->
            <Steps :current="current">
                <Step title="商品信息" icon="ios-information-circle"></Step>
                <Step title="商品图片" icon="md-images"></Step>
                <Step title="发布商品" icon="ios-send"></Step>
            </Steps>
            <!-- 商品信息表单区域 -->
            <b-row align-h="center" class="my-goodsInfo">
                <b-col cols="12" sm="12" md="6" lg="6">
                    <div class="goodInfo">
                        <div class="tip-info">
                            <h5>为商品添加图片</h5>
                            <p><Icon type="md-bulb" /> tips：最多上传4张图片哦</p>
                        </div>
                        <div class="clearfix">
                            <a-upload
                             :beforeUpload="beforeUpload"
                            listType="picture-card"
                            :multiple="multiple"
                            :fileList="fileList"
                            :customRequest ="customRequest"
                            @preview="handlePreview"
                            @change="handleChange"
                            >
                            <div v-if="fileList.length < 4">
                                <a-icon type="plus" />
                                <div class="ant-upload-text">Upload</div>
                            </div>
                            </a-upload>
                            <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                            <img alt="example" style="width: 100%" :src="previewImage" />
                            </a-modal>
                        </div>
                        <Button class="btn-info" type="primary" @click="save">保存</Button>
                    </div>
                </b-col>
            </b-row>
        </b-container>
    </div>
</template>

<script>
function getBase64(file) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = () => resolve(reader.result)
        reader.onerror = error => reject(error)
    })
}
export default {
    name: 'addGoodImgs',
    data() {
        return {
            current: 2,
            previewVisible: false,
            previewImage: '',
            fileList: [],
            multiple: true,
            gId: this.$route.params.gId,
        }
    },
    methods: {
        beforeUpload(file) {
            this.fileList = [...this.fileList, file]
            return false
        },
        handleCancel() {
            this.previewVisible = false
        },
        async handlePreview(file) {
            if (!file.url && !file.preview) {
                file.preview = await getBase64(file.originFileObj)
            }
            this.previewImage = file.url || file.preview
            this.previewVisible = true
        },
        handleChange({ fileList }) {
            this.fileList = fileList.slice(-4)
            console.log(this.fileList)
        },
        save() {
            const formData = new FormData()
            this.fileList.forEach(file => {
                formData.append('files', file)
            })
            this.$axios({
                url: 'goodsPicture/save',
                method: 'post',
                processData: false,
                params: {
                    gpGid: this.gId,
                    files: formData,
                },
                headers: {
                    Authorization: localStorage.getItem('token'),
                    'Content-Type': 'multipart/form-data', // 文件上传时的格式
                },
            }).then(res => {
                console.log(res.data)
            })
        },
        customRequest(data) {
            const formData = new FormData()
            formData.append('files', data.file)
            formData.append('gpGid', this.gId)
            this.saveFile(formData)
        },
        saveFile(formData) {
            this.form.validateFields((err, values) => {
                if (!err) {
                    let that = this
                    this.axios(
                        {
                            method: 'post',
                            url: 'goodsPicture/save',
                            data: formData,
                            headers: {
                                Authorization: localStorage.getItem('token'),
                            },
                        }
                    )
                    .then((response) => {
                        console.log(response)
                    })
                    .catch((error) => {
                        console.log(error)
                    })
                }
            })
        },
    },
}
</script>
<style scoped>
.row-box{
    background: #fff;
    padding: 15px;
    margin-bottom: 15px;
}
.my-goodsInfo {
    margin-top: 20px;
}
/* you can make up upload button and sample style by using stylesheets */
.ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
}
.ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
}
.goodInfo {
    min-height: 440px;
}
.tip-info {
    margin-bottom: 20px;
}
.btn-info {
    margin-top: 20px;
}
</style>
